<template>
	<view class="music-detail">
		<view class="fixbg" :style="{'background-image':'url('+detailMusicInfo.al.picUrl+')'}"></view>
		<!-- 头部导航区 -->
		<musichead :title="detailMusicInfo.name" :icon="showHeadIcon" titleColor="#fff"></musichead>
		<!-- 内容区 -->
		<view class="container" v-if="isLoading">
			<!-- 光碟动画区 -->
			<view class="music-cd">
				<view class="cd" @tap="handleToPlay">
					<image :src="detailMusicInfo.al.picUrl" mode="widthFix" :class="{'run':iconPlay}"></image>
					<text class="iconfont" :class="[iconPlay? 'icon-24gl-pauseCircle':'icon-yousanjiao']"></text>
					<view class=""></view>
				</view>
			</view>
			<!-- 光碟区完成 -->
			<!-- 歌词区 -->
			<view class="detail-lyric">
				<view class="detail-lyric-warp" :style="{transform:'translateY('+ -(lyricIndex-1)*76 +'rpx)'}">
					<view class="detail-lyric-item" :class="{active:lyricIndex===index}" v-for="(item,index) in songLyric" :key="index">{{item.lyric}}</view>
				</view>
			</view>
			<!-- 歌词区完成 -->
			<!-- 进度条区 -->
			<view class="progress-bar">
				<view class="next" @tap="nextSong">>></view>
				<progress :percent="percent" stroke-width="2" backgroundColor="#999" activeColor="#FFFDEF"/>
			</view>
			<!-- 进度条区完成 -->
		</view>
	</view>
</template>

<script>
	import musichead from '../../components/musichead/musichead.vue'
	export default {
		comments:{
			musichead
		},
		data() {
			return {
				showHeadIcon:true,
				// 歌曲信息
				detailMusicInfo:{
					al:{
						picUrl:''
					}
				},
				// 歌词
				songLyric:[],
				// 歌词激活选中状态
				lyricIndex:0,
				// 播放歌曲
				bgAudioManager:{},
				// 控制播放旋转
				iconPlay:true,
				// 歌曲进度条百分比
				percent:0,
				// 页面加载
				isLoading:false
				
			}
		},
		onLoad(e){
			// console.log(e.songId)
			this.getAllSongInfo(e.songId)
			this.isLoading = true
		},
		onUnload(){
			this.clearTimer()
			this.bgAudioManager.pause()
		},
		// onHide(){
		// 	this.clearTimer()
		// },
		methods: {
			getAllSongInfo(id){
				this.getDetailInfo(id)
				this.getLyric(id)
				this.getSongUrl(id)
			},
			// 获取歌曲info-------------------------------------------------------------------------------------------------
			async	getDetailInfo(id){
				const data = await this.$request({url:`/song/detail?ids=${id}`})
				this.detailMusicInfo = data.songs[0]
				// console.log(this.detailMusicInfo)
			},
			// 获取歌词-------------------------------------------------------------------------------------------------
			async getLyric(id){
				const data = await this.$request({url:`/lyric?id=${id}`})
				// console.log(data.lrc.lyric)
				const lyric = data.lrc.lyric
				// 定义正则表达式取出歌词数据
				// let re = /\[([^\]]+)\]([^\[]+)/g;
				// var result = [];
				// lyric.replace(re, ($0,$1,$2) => {
				// 	result.push({"time": this.formatTimeToSecond($1), "lyric": $2});
				// });
				// this.songLyric = result
				// console.log(this.songLyric)
				// 我自己的写法
				const re = /\[\d+\:\d+\.\d+\].*\n/g
				const res = lyric.match(re).map(v => {
					v = v.replace(/\[/,'')
					let [time,lyric] = v.split(']')
					time = this.formatTimeToSecond(time)
					lyric = lyric.replace(/^\n$/,'~')
					return {time, lyric}
				})
				this.songLyric = res
				// console.log(this.songLyric)
			},
			// 获取歌曲地址-------------------------------------------------------------------------------------------------
			async getSongUrl(id){
				const url = await this.$request({url:`/song/url?id=${id}`})

				// #ifdef MP-WEIXIN
				this.bgAudioManager = uni.getBackgroundAudioManager();
				this.bgAudioManager.title = this.detailMusicInfo.name;
				// #endif
				
				// #ifdef H5
				this.bgAudioManager = uni.createInnerAudioContext();
				this.iconPlay = false
				// #endif
				
				// 播放音乐
				this.bgAudioManager.src = url.data[0].url || '';
				// 歌曲播放钩子
				this.bgAudioManager.onPlay(()=>{
					this.iconPlay = true
					//一播放就开启定时监听
					this.lyricListener()
					this.progressBarListener()
				})
				//歌曲暂停钩子
				this.bgAudioManager.onPause(()=>{
					this.iconPlay = false
					// 一暂停就关闭定时监听
					this.clearTimer()
				})
			},
			// 监听歌词变化
			lyricListener(){
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					for(var i = 0; i < this.songLyric.length; i++){
						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1].time){
							this.lyricIndex = this.songLyric.length - 1
							break;
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time){
							this.lyricIndex = i
						}
					}
					console.log(this.lyricIndex,this.songLyric[this.lyricIndex].lyric)
					
				},500)
			},
			// 监听进度条
			progressBarListener(){
				const songTime = this.songLyric[this.songLyric.length - 1].time
				const percentTime = (songTime/100)*1000
				clearInterval(this.progressTime)
				this.progressTime = setInterval(() => {
					if(this.percent >= 100){
						this.percent = 0
					}
					this.percent += 1;
				},percentTime)
			},
			// 清除定时器
			clearTimer(){
				clearInterval(this.timer)
				clearInterval(this.progressTime)
			},
			// 格式化歌词时间方法
			formatTimeToSecond(value){
				const arr = value.split(':')
				return parseFloat(arr[0]*60) + Number(parseFloat(arr[1]).toFixed(1))
			},
			// 暂停播放歌曲
			handleToPlay(){
				if(this.bgAudioManager.paused){
					this.bgAudioManager.play()
				}else{
					this.bgAudioManager.pause()
				}
			},
			// 下一首歌曲
			nextSong(){
				this.$store.dispatch('gotoNextSong',this.detailMusicInfo.id)
				this.nextId = this.$store.state.nextId
				this.getAllSongInfo(this.nextId)
				this.percent = 0
				// console.log(this.nextId)
			}
		}
	}
</script>

<style lang="scss" scoped>
.music-detail{
	.container{
		overflow: hidden;
		// 光碟区样式
		.music-cd{
			.cd{
				position: relative;
				width: 580rpx;
				height: 580rpx;
				margin: 214rpx auto 0;
				border-radius: 50%;
				background: url(../../static/image/disc.png) no-repeat;
				background-position: center;
				background-size: cover;
				// 旋转动画
				.run{
					animation-play-state: running;
				}
				@keyframes move{
					from{transform: rotate(0deg);}
					to{transform: rotate(360deg);}
				}
				image{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					border-radius: 50%;
					width: 350rpx;
					// 旋转
					animation: 10s linear move infinite;
					animation-play-state: paused;
				}
				text{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 100rpx;
					color: #fff;
				}
				view{
					position: absolute;
					top: -190rpx;
					left: 240rpx;
					width: 230rpx;
					height: 360rpx;
					background:url(../../static/image/needle.png) no-repeat;
					background-size: cover;
				}
			}
		}
		// 歌词区样式
		.detail-lyric{
			height: 234rpx;
			overflow: hidden;
			.detail-lyric-warp{
				transition: .3s;
				.detail-lyric-item{
					height: 76rpx;
					line-height: 86rpx;
					text-align: center;
					font-size: 32rpx;
					color: #999;
				}
				.active{
					color: #fff;
				}
			}
		}
		// 进度条样式
		.progress-bar{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150rpx;
			background-color: rgba(0,0,0,0.5);
			.next{
				width: 50rpx;
				height: 50rpx;
				color: #fff;
				margin-left: 460rpx;
			}
			progress{
				width: 90%;
				margin: 40rpx auto;
			}
		}
	}
}
</style>
